<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/common.css">
    <title>游戏充值</title>

    <style>
        .recharge-page {
            width: 900px;
            margin: 80px auto;
        }
        .tips {
            padding: 10px;
            font-size: 14px;
            line-height: 28px;
            background-color: #d7e2ef;
            border: 1px solid #ec846a;
            color: #ec846a;
            border-radius: 6px;
            margin-bottom: 20px;
        }


        .pay {
            float: left;
            height: 50px;
            padding: 0 50px;
            text-align: center;
            cursor: pointer;
        }
        .info {
            height: 48px;
            border-bottom: 1px solid #f3f3f3;
            overflow: hidden;
            margin-bottom: 12px;
            clear: both;
        }

        .field {
            float: left;
            font-size: 16px;
            width: 100px;
        }

        .value {
            float: left;
            margin-left: 15px;
            font-size: 16px;
        }

        .money {
            color: #e69800;
        }

        .vip-money {
            color: #cf7013;
            margin-left: 10px;
        }

        input[type=text] {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            font-variant: tabular-nums;
            list-style: none;
            -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
            position: relative;
            display: inline-block;
            width: 100%;
            height: 32px;
            padding: 4px 11px;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            line-height: 1.5;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ddd9d2;
            border-radius: 4px;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

        input[type=text]:focus, input[type=text]:hover {
            border-color: #ffac59;
            border-right-width: 1px !important;
            outline: 0;
            -webkit-box-shadow: 0 0 0 2px rgba(255, 145, 48, .2);
            box-shadow: 0 0 0 2px rgba(255, 145, 48, .2);
        }

        button {
            width: 155px;
            height: 41px;
            line-height: 41px;
            background-color: #fff;
            border-radius: 21px;
            color: #cf7013;
            font-size: 16px;
            font-weight: 700;
            margin: 20px 0 0 75px;
            border: 1px solid #ffb82c;
        }
        .pay-num {
            list-style: none;
            overflow: hidden;
        }

        .pay-num li {
            float: left;
            background-color: #fff;
            border-radius: 4px;
            border: 1px solid #e6a032;
            position: relative;
            padding: 2px 5px;
            margin-right: 10px;
            font-size: 12px;
        }

        .check_pay {
            display: block;
            width: 180px;
            line-height: 50px;
            height: 50px;
            text-align: center;
            border-radius: 25px;
            font-weight: bold;
            color: #e69800;
            border: 1px solid #e69800;
            margin: 20px auto 15px auto;
            cursor: pointer;
            font-size: 16px;
            background: none;
            box-shadow: 0 2px 5px #eee;
            transition: .2s;
        }

        .check_pay:hover {
            background: #e69800;
            color: #fff;
        }
    </style>
</head>
<body>
@verbatim
    <div class="recharge-page" id="app">
        <div class="tips">
            请自习检查订单信息，如果与您的任务信息不相符，请关闭本页面，重新打开NPC点击充值按钮。如确认无误，即可点击立即充值进行充值。
        </div>
        <div class="content-box">

            <div class="pay">
                <div class="info">
                    <div class="field">订单编号：</div>
                    <div class="value" style="width: 400px">
                        {{rechargeForm.order_no}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">游戏版本：</div>
                    <div class="value" style="width: 400px">
                        {{rechargeForm.game_version}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">游戏分区：</div>
                    <div class="value" style="width: 400px">
                        {{rechargeForm.game_server}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">游戏账号：</div>
                    <div class="value" style="width: 400px">
                        {{rechargeForm.game_account}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">游戏人物：</div>
                    <div class="value" style="width: 400px">
                        {{rechargeForm.game_role}}
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">联系QQ：</div>
                    <div class="value" style="width: 400px">
                        <input type="text" v-model="rechargeForm.qq" placeholder="请输入qq，以便后续处理异常">
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">充值金额：</div>
                    <div class="value" style="width: 400px">
                        <input type="text" v-model="rechargeForm.money" placeholder="">
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">快速选择：</div>
                    <div class="value" style="width: 600px; height: 40px;">
                        <ul class="pay-num">
                            <li
                                :style="rechargeForm.money === item.need_money ? {backgroundColor: '#53a3c9'} : {}"
                                v-for="item in rechargeMoneyList"
                                :key="item.need_money"
                                @click="changeMoney(item.need_money)"
                            >
                                {{item.need_money}}元
                            </li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="info">
                    <div class="field">支付方式：</div>
                    <div class="value">
                        <input id="wx-3" type="radio" name="payment" value="WEIXIN" v-model="rechargeForm.pay_type">&nbsp;<label
                            for="wx-3">微信</label>
                        &nbsp;&nbsp;
                        <input id="wx-4" type="radio" name="payment" value="ALIPAY" v-model="rechargeForm.pay_type">&nbsp;<label
                            for="wx-4">支付宝</label>
                        &nbsp;&nbsp;
                    </div>
                    <div class="clear"></div>
                </div>
                <div id="submit" class="btn1"><input type="submit" class="check_pay" @click="startPay" value="确认支付"></div>
            </div>

            <!--<el-form :model="rechargeForm" label-width="100px">
                <el-form-item label="订单编号">
                    <el-input v-model="rechargeForm.order_no" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏版本">
                    <el-input v-model="rechargeForm.game_version" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏分区">
                    <el-input v-model="rechargeForm.game_server" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏账号">
                    <el-input v-model="rechargeForm.game_account" disabled></el-input>
                </el-form-item>
                <el-form-item label="游戏人物">
                    <el-input v-model="rechargeForm.game_role" disabled></el-input>
                </el-form-item>
                <el-form-item label="QQ号">
                    <el-input v-model="rechargeForm.qq" placeholder="请填写正确的QQ号，在充值异常时可及时联系您"></el-input>
                </el-form-item>
                <el-form-item label="充值金额">
                    <el-input v-model="rechargeForm.money"></el-input>
                </el-form-item>
                <el-form-item label="快速填写">
                    <el-radio-group v-model="rechargeForm.money">
                        <el-radio-button
                            v-for="item in rechargeMoneyList"
                            :label="item.need_money"
                            :key="item.need_money"
                        >{{item.need_money}}元</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="支付类型">
                    <el-radio-group v-model="rechargeForm.pay_type">
                        <el-radio-button label="WEIXIN">微信支付</el-radio-button>
                        <el-radio-button label="ALIPAY">支付宝</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="startPay">立即充值</el-button>
                </el-form-item>
            </el-form>-->
        </div>
        <!--    充值弹窗-->
        <!--<el-dialog title="支付页面" :visible.sync="payVisible" width="600px" center>
            <template v-if="payInfo.type === 1">
                <div id="pay-web-info"></div>
            </template>
            <template v-if="payInfo.type === 2">
                <div style="margin: 100px 0; text-align: center; font-size: 20px;">
                    请勿关闭此弹窗，支付成功后会自动关闭！
                </div>
            </template>
            <template v-if="payInfo.type === 3">
                <div id="qrcode" style="width: 256px; margin: 20px auto;"></div>
            </template>
            <template v-if="payInfo.type === 4 || payInfo.type === 5">
                <div style="width: 256px; margin: 20px auto;">
                    <img :src="payInfo.data" alt="" style="width: 256px; height: 256px;">
                </div>
            </template>
        </el-dialog>-->

    </div>
</body>
@endverbatim
<script src="/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入组件库 -->
<script src="/js/qrcode.min.js" type="text/javascript"></script>
<script>
    const App = new Vue({
        el: '#app',
        data() {
            return {
                rechargeForm: {
                    order_no: '{{$orderNo}}',
                    money: '',
                    pay_type: 'WEIXIN',
                    game_version: '',
                    game_server: '',
                    game_account: '',
                    game_role: '',
                    qq: '',
                    union_id: '',
                    plat_name: '{{$platName}}',
                },
                rechargeMoneyList: [
                    {need_money: 10},
                    {need_money: 20},
                    {need_money: 30},
                    {need_money: 50},
                    {need_money: 100},
                    {need_money: 300},
                    {need_money: 500},
                    {need_money: 1000},
                    {need_money: 2000},
                    {need_money: 5000},
                ],
                payLoading: false,
                payVisible: false,
                payInfo: {
                    type: 0,
                    data: "",
                },
                curOrderId: 0,
            }
        },
        mounted() {
            this.rechargeForm.game_version = '{{$gameVersion}}'
            this.rechargeForm.game_server = '{{$gameServer}}'
            this.rechargeForm.game_account = '{{$gameAccount}}'
            this.rechargeForm.game_role = '{{$gameRole}}'
            this.rechargeForm.union_id = '{{$unionId}}'
        },
        watch: {
            payVisible(val) {
                if (!val && this.queryOrderStatusTimer) {
                    clearInterval(this.queryOrderStatusTimer)
                    return
                }
                this.queryOrderStatusTimer = setInterval(this.getOrderStatus, 2000)
            },
        },
        methods: {
            getDzLy(money) {
                return Math.floor(+money *1.01);
            },
            getUrlParam(name) {
                let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURI(r[2]);
                return '';
            },
            startPay() {
                this.curOrderType = 3
                this.payLoading = true
                this.rechargeForm.money = parseInt(this.rechargeForm.money)
                if (this.rechargeForm.money < 10) {
                    this.$message.error('金额必须大于10')
                    return
                }
                if (this.rechargeForm.money % 1 !== 0){
                    this.$message.error('金额必须是整数')
                    return
                }
                let _that = this
                $.post('/gameRecharge', this.rechargeForm, function (res) {
                    console.log(res)
                    if (res.success !== 'true') {
                        this.payLoading = false
                        _that.$message.error(res.msg)
                        return
                    }
                    _that.curOrderId = res.data.order_id
                    _that.rechargeVisible = false
                    _that.payLoading = false
                    _that.rechargeForm = {
                        money: '',
                        pay_type: '',
                    }
                    _that.openPayPage(res.data.pay_info)
                })
            },
            getOrderStatus() {
                let _that = this
                $.get(`/api/pay/getOrderStatus/${this.curOrderType}/${this.curOrderId}`, {}, function (res) {
                    console.log(res)
                    if (res.success !== 'true') {
                        _that.payLoading = false
                        _that.$message.error(res.msg)
                        return
                    }
                    if (res.data.status === 1) {
                        _that.payVisible = false
                        _that.$message.success('支付成功')
                        setTimeout(() => {
                            window.close()
                        },2000)
                    }
                })
            },
            openPayPage(payInfo) {
                // 打开支付页面
                this.payInfo = payInfo.resultdata
                this.payVisible = true
                // 新窗口
                if (payInfo.resultdata.type === 2) {
                    window.open(payInfo.resultdata.data,'_blank');
                }
                // 二维码串
                if (payInfo.resultdata.type === 3) {
                    this.$nextTick(() => {
                        document.getElementById("qrcode").innerHTML = "";
                        new QRCode(document.getElementById("qrcode"), {
                            text: payInfo.resultdata.data,
                            width: 256,
                            height: 256,
                            colorDark : "#000",
                            colorLight : "#fff",
                            correctLevel : 0 // 二维码结构复杂性 0~3
                        });
                    })
                }
            },
            changeMoney(m) {
                this.rechargeForm.money = m
            }
        },
    })
</script>

</html>
